<template>
  <div class="user-box">
    <el-dropdown>
      <a href="javascript:;" class="el-dropdown-link">
        <el-avatar
          :size="45"
          src="https://img0.baidu.com/it/u=2403478438,4001285120&fm=26&fmt=auto"
          @error="errorHandler"
        >
          <img src="@/assets/img/noImg.png" />
        </el-avatar>
        <span class="text">{{ name }}</span>
        <!-- <svg-icon class="icon" iconClass="down"></svg-icon> -->
      </a>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            ><div @click="goCenter">个人中心</div></el-dropdown-item
          >
          <el-dropdown-item
            ><div @click="logout">退出登录</div></el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  created() {
    this.name = this.$store.getters["user/info"].realName
  },
  methods: {
    errorHandler() {
      console.log("头像请求错误");
    },
    logout() {
      this.$store.dispatch("user/logout").then(() => {
        this.$router.push("/login");
      });
    },
    goCenter() {
      console.log(123);
      this.$router.push("/personCenter");
    },
  },
};
</script>

<style lang="scss" scoped>
.user-box {
  height: 60px;
  max-width: 160px;
  min-width: 100px;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;

  .el-dropdown {
    .el-dropdown-link {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .el-avatar {
        align-items: center;
        justify-content: center;
        display: flex;
        background-color: #f5f7fa;

        img {
          width: 60%;
          height: 60%;
        }
      }

      .icon {
        width: 0.8rem;
        height: 0.8rem;
      }

      .text {
        padding: 5px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }

      &:link,
      &:visited,
      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
        color: #303133;
      }
    }
  }
}
</style>